﻿@model OAuthSignInModel
@{
    //var client = ViewBag.client as OAuthApp.Data.App;
    var toggle = ViewBag.toggle?.ToString();
}

<div ng-app="app" class="container">
    <div class="row" ng-cloak ng-controller="AppCtrl">

        @*<div class="text-center">
            <img src="@client.Logo" class="shadow-sm border border-2 p-1 rounded-circle" width="68px"
                 onerror="this.src='/assets/app_default.png'" />
            <div class="my-3">
                <h1>@client.Name</h1>
                <p class="mt-2">@client.Website</p>
            </div>
        </div>*@

        <div ng-if="!showSignInPanel" class="col-md-6 col-sm-12 bg-white border-start border-end pt-4 px-4"
             style="margin: auto; min-height: 100vh;">
            <div>
                <h4>选择账户</h4>
                <div class="list-group list-group-flush">
                    <div class="list-group-item d-flex justify-content-between align-items-center pr-0"
                         ng-repeat="x in accounts track by $index">
                        <a href="javascript:;" ng-click="signinByAccount(x)">{{x.UserName}}</a>
                        <span class="badge-pill">
                            <button class="btn btn-link text-dark btn-sm" type="button" ng-click="delAccount($index)">
                                X
                            </button>
                        </span>
                    </div>
                </div>
                <div class="d-grid">
                    <button type="button" ng-click="useOtherAccount()" class="btn btn-indigo mt-3">使用其他账户</button>
                    <a href="@Model.redirect_uri" class="btn btn-white my-3">返回</a>
                </div>
            </div>
        </div>

        <div ng-if="showSignInPanel" class="col-md-6 col-sm-12 bg-white border-start border-end pt-4 px-4"
             style="margin: auto; min-height: 100vh;">
            <h4 class="d-flex">
                <span class="w-100">登录</span>
                <button class="btn btn-sm border" ng-click="chooseAccount()" ng-if="accounts.length>0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-ui-radios-grid" viewBox="0 0 16 16">
                        <path d="M3.5 15a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm9-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM16 3.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zm-9 9a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zm5.5 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm-9-11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                    </svg>
                </button>
            </h4>

            <form method="post" action="/OAuth/SignInPost">
                <input name="scheme" type="hidden" value="@Model.scheme" />
                <input name="client_id" type="hidden" value="@Model.client_id" />
                <input name="scope" type="hidden" value="@Model.scope" />
                <input name="nonce" type="hidden" value="@Model.nonce" />
                <input name="state" type="hidden" value="@Model.state" />
                <input name="grantType" type="hidden" value="@Model.grantType" />
                <input name="redirect_uri" type="hidden" value="@Model.redirect_uri" />

                <div class="mb-3" ng-show="!signinHint">
                    <label class="form-label" for="username">账号</label>
                    <input type="text" name="userName" ng-model="selectedAccount.UserName" class="form-control" />
                    <small class="form-text text-muted">请输入您的邮箱账号/手机号</small>
                </div>

                <div ng-if="signinHint">
                    <div class="text-center">
                        <img src="{{selectedAccount.Avatar}}" onerror="this.src='/assets/user.png'" class="border p-1 rounded-circle shadow my-3" width="64px" />
                    </div>
                    <div class="form-group text-center pt-3 text-muted">
                        <h1>{{selectedAccount.UserName}}</h1>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="password">密码</label>
                    <input type="password" name="password" class="form-control" (keyup)="keyUp($event)" ng-model="selectedAccount.Pwd" />
                </div>

                <div class="d-grid">
                    <button class="btn btn-indigo btn-block mt-3" type="submit" ng-click="submitSignIn()">
                        登录
                    </button>

                    <a href='@Model.redirect_uri' class="btn btn-white btn-block mt-3">返回</a>

                    @*<div *ngIf="!loginHintFlag&&logins.length>0" class="pt-3">
                        <small style="margin-top: .8rem;" class="text-muted">
                            <font>其他登录</font> -
                        </small>
                        <a href="javascript:void(0)" *ngFor="let x of logins" class="btn btn-light border btn-sm m-2"
                           (click)="doExternalLogin(x)">{{x}}</a>
                    </div>*@
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        var app = angular.module('app', []);

        app.controller('AppCtrl', ['$scope', '$timeout', async function ($scope, $timeout) {
            $scope.signinHint = false;
            $scope.showSignInPanel = false;
            $scope.accounts = JSON.parse(Cookies.get("_IdentityKeys") || "[]");
            $scope.showSignInPanel = $scope.accounts.length < 1;

            $scope.selectedAccount = {};
            $scope.delAccount = function (_index) {
                delete $scope.accounts[_index];
                $scope.accounts = $scope.accounts.filter(x => x);

                Cookies.set('_IdentityKeys', JSON.stringify($scope.accounts),
                    {
                        expires: 2678400
                    });

                $scope.showSignInPanel = $scope.accounts.length < 1;
            }

            $scope.signinByAccount = function (_account) {
                $timeout(() => {
                    $scope.showSignInPanel = true;
                    $scope.signinHint = true;
                    $scope.selectedAccount = _account;
                }, 1)
            }

            $scope.chooseAccount = function () {
                $timeout(() => {
                    $scope.showSignInPanel = false;
                }, 1)
            }

            $scope.useOtherAccount = function () {
                $timeout(() => {
                    $scope.showSignInPanel = true;
                    $scope.selectedAccount = {};
                    $scope.signinHint = false;
                }, 1)
            }


            @if (!string.IsNullOrWhiteSpace(toggle))
            {
                @Html.Raw("$scope.signinByAccount($scope.accounts.filter(x => x.UserName = '" + toggle + "')[0] || {UserName:'" + toggle + "'})")
            }

            }]);
    </script>
}